<template>
  <a-row class="j-select-biz-component-box" type="flex" :gutter="8" style="flex-wrap: nowrap;">
    <a-col class="left" :class="{'full': !buttons}">
      <slot name="left">
        <a-input-search
          class="novalenter"
         @search="JZSearch"
          :placeholder="placeholder"
          v-model="selectValue"
          @blur="inputBlur"
          @input="inputChange"
          :disabled="disabled"
         
        />
      </slot>
    </a-col>

    <a-col v-if="buttons" class="right">
      <a-button type="primary" icon="search" :disabled="disabled" @click="open">{{selectButtonText}}</a-button>
    </a-col>

    <j-select-biz-component-modal
      v-model="selectValue"
      :visible.sync="visible"
      v-bind="modalProps"
      @cancel="cancel"
      @getv="getv"
      @okDetail="okDetail"
    />
  </a-row>
</template>

<script>
  import JSelectBizComponentModal from './JSelectBizComponentModal'

  export default {
    name: 'JSelectBizComponent',
    components: { JSelectBizComponentModal },
    props: {
      value: {
        type: String,
        default: ''
      },
      /** 是否返回 id，默认 false，返回 code */
      returnId: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否支持多选，默认 true
      multiple: {
        type: Boolean,
        default: true
      },
      //禁用数组
      disabledArr:{
        type:Array,
        default: () => []
      },
      //选中数组
      abledArr:{
        type:Array,
        default: () => []
      },
      // 是否显示按钮，默认 true
      buttons: {
        type: Boolean,
        default: false
      },
      // pamaName: {
      //   type: String,
      //   default: 'approvalNumber'
      // },
      inputs:{
        type: Boolean,
        default: true
      },
      // 显示的 Key
      displayKey: {
        type: String,
        default: null
      },
      rowKey: {
        type: String,
        default: 'code'
      },
      // 返回的 key
      returnKeys: {
        type: Array,
        default: () => ['id', 'id']
      },
      // 选择按钮文字
      selectButtonText: {
        type: String,
        default: '选择'
      },

    },
    data() {
      return {
        selectValue: '',
        dataSourceMap: {},
        visible: false,
        selectOpen: false,
      }
    },
    computed: {
      valueKey() {
        return this.returnId ? this.returnKeys[0] : this.returnKeys[1]
      },
      modalProps() {
        return Object.assign({
          valueKey: this.valueKey,
          multiple: this.multiple,
          rowKey:this.rowKey,
          returnKeys: this.returnKeys,
          queryParamCode: this.queryParamCode,
          queryParamText: this.queryParamText,
          displayKey: this.displayKey || this.valueKey,
          disabledArr:this.disabledArr,
          abledArr:this.abledArr,
          moreQuery:true
        }, this.$attrs)
      },
      //是否 已经点击 了 子集弹窗的 确定 保存数据，关闭 父级弹窗
      weicaiSelected() {
        return this.$store.getters.weicaiSelected
      }
    },
    watch: {
      //是否 已经点击 了 子集弹窗的 确定 保存数据，关闭 父级弹窗
      weicaiSelected(nv){
        if(nv){
          this.visible = false
        }
      },
      value: {
        immediate: true,
        handler(val) {
          if (val) {
          
            this.selectValue = val
          } else {
            this.selectValue = ''
          }
        }
      },
      //回显数据用 对于点击以后再回显数据时 无用
      selectValue: {
        deep: true,
        handler(val) {
          console.log(val,'val');
            this.$emit('input', val)
        }
      },
      modalProps(val){
        if(val){
          // console.log(val,'modalProps');
        }
      },
      // selectValue: {
      //   deep: true,
      //   handler(val) {
      //     // let rows = val.map(key => this.dataSourceMap[key])
      //     // let data = val.join(',')
      //     if (val) {
      //       this.$emit('select', val)
      //       // this.$emit('input', val)
      //       this.$emit('change', val)
      //     }
      //   }
      // }
    },
    methods: {
      //手动关闭弹窗监听
      cancel(){
        // 药典需要重置值
        if(this.$route.name == 'menzhen-yaodian-index'){
            this.selectValue = ''
        }
        this.$emit('layercancel')
      },
      inputBlur(){
        this.$emit('blur')
      },
      inputChange(event){
        var that = this;
        // 获取输入框的当前值  
        let currentValue = event.target['_value'];  
        if(currentValue){
            // 使用正则表达式查找两个或更多连续的点  
          let regex = /\.{2,}/g;  
            
          // 替换所有匹配的连续点为单个点（如果没有点或只有一个点则不处理）  
          let newValue = currentValue.replace(regex, '.');  
          // 如果替换后的值与原值不同，则更新数据  
          if (newValue !== currentValue) {  
            console.log('请输入正确的格式222222')
            // that.form.setFieldsValue({field:newValue})
            this.selectValue = newValue
          }  
        }
        this.$emit('inputChange')
      },
      getv(val){
         // 药典需要重置值
        if(this.$route.name == 'menzhen-yaodian-index'){
            this.selectValue = ''
        }
        this.$emit('select', val)
        // this.$emit('input', val)
        this.$emit('change', val)
      },
      okDetail(val){
        this.$emit('okDetail', val)
        this.$store.commit('SET_WC_SELECTED', false);
      },
      okset(val){
        this.$emit('okset', val)
      },
      JZSearch(val){
        var that = this;
        this.$emit('layerChange') //病种弹窗 回调，处理不弹窗状态事件
        // this.selectValue = val;
        setTimeout(() => {
          that.visible = true
        }, 500);
     
      },
      open(){
        this.$emit('layerChange')
        this.visible=true
      },
      handleOptions(options, dataSourceMap) {
        this.selectOptions = options
        this.dataSourceMap = dataSourceMap
      },
     
    }
  }
</script>

<style lang="less" scoped>
  .j-select-biz-component-box {

  

    .left {
     
    }

   

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }
</style>